<template>
  <div>
    <!--title-->
    <div class="content-title" ref="title">
      <div class="su-title">
        <i class="el-icon-tickets"> </i>
        <span>我的任务</span>
      </div>
      <div class="batch-but-css">
<!--        <el-button type="primary" icon="el-icon-plus el-icon&#45;&#45;left" @click="titleAddClick">新增</el-button>-->
        <el-button type="danger" icon="el-icon-refresh el-icon--left" @click="tabsOrTableDialogEmpty">清空设置
        </el-button>
      </div>
    </div>

    <!--tabs-->
    <div class="common-tabs" ref="tabs">
      <el-tabs v-model="tabsProp.active" @tab-click="tabsSwitchClick">
        <el-tab-pane name="" label="全部"/>
      </el-tabs>
    </div>

    <!--table-->
    <template>
      <!--表格前的按钮-->
      <div class="common-table-title-but" ref="tableTopBut">
      </div>
      <!--表格内容-->
      <el-table
          ref="table"
          :data="tableData"
          border
          style="width: 100%"
          :max-height="tableProp.tableHeight"
          :header-cell-style="{background:'#f5f7fa',color:'#081333',fontWeight: 'normal'}"
          v-loading="tableProp.loading"
          @selection-change="tableSelectionChange"
          class="cc-table-style"
      >
        <el-table-column label="序号" type="index" width="50" align="center" fixed="left"/>
        <el-table-column label="任务类型" min-width="150" :show-overflow-tooltip="true" align="center" prop="taskType"
                         v-if="Utils.tableShowFixed('任务类型',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('任务类型',this.toConfigureFieldDialog.tableProp).fixed">
          <template slot-scope="scope">
            <template v-for="item in tableSearchOption.taskTypeOption">
              <template v-if="scope.row.taskType==item.value">
                {{ item.label }}
              </template>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="任务描述" min-width="150" :show-overflow-tooltip="true" align="center"
                         prop="description"
                         v-if="Utils.tableShowFixed('任务描述',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('任务描述',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="计划开始时间" min-width="150" :show-overflow-tooltip="true" align="center"
                         prop="planStart"
                         v-if="Utils.tableShowFixed('计划开始时间',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('计划开始时间',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="计划结束时间" min-width="150" :show-overflow-tooltip="true" align="center"
                         prop="planEnd"
                         v-if="Utils.tableShowFixed('计划结束时间',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('计划结束时间',this.toConfigureFieldDialog.tableProp).fixed"/>
        <!--        <el-table-column label="派单时间" min-width="150" :show-overflow-tooltip="true" align="center"-->
        <!--                         prop="distributeTime"-->
        <!--                         v-if="Utils.tableShowFixed('派单时间',this.toConfigureFieldDialog.tableProp).checkbox"-->
        <!--                         :fixed="Utils.tableShowFixed('派单时间',this.toConfigureFieldDialog.tableProp).fixed"/>-->
        <!--        <el-table-column label="退单时间" min-width="150" :show-overflow-tooltip="true" align="center" prop="refuseTime"-->
        <!--                         v-if="Utils.tableShowFixed('退单时间',this.toConfigureFieldDialog.tableProp).checkbox"-->
        <!--                         :fixed="Utils.tableShowFixed('退单时间',this.toConfigureFieldDialog.tableProp).fixed"/>-->
        <!--        <el-table-column label="退单理由" min-width="150" :show-overflow-tooltip="true" align="center" prop="refuseWhy"-->
        <!--                         v-if="Utils.tableShowFixed('退单理由',this.toConfigureFieldDialog.tableProp).checkbox"-->
        <!--                         :fixed="Utils.tableShowFixed('退单理由',this.toConfigureFieldDialog.tableProp).fixed"/>-->
        <!--        <el-table-column label="接单时间" min-width="150" :show-overflow-tooltip="true" align="center" prop="acceptTime"-->
        <!--                         v-if="Utils.tableShowFixed('接单时间',this.toConfigureFieldDialog.tableProp).checkbox"-->
        <!--                         :fixed="Utils.tableShowFixed('接单时间',this.toConfigureFieldDialog.tableProp).fixed"/>-->
        <!--        <el-table-column label="任务回复" min-width="150" :show-overflow-tooltip="true" align="center" prop="response"-->
        <!--                         v-if="Utils.tableShowFixed('任务回复',this.toConfigureFieldDialog.tableProp).checkbox"-->
        <!--                         :fixed="Utils.tableShowFixed('任务回复',this.toConfigureFieldDialog.tableProp).fixed"/>-->
        <!--        <el-table-column label="回单时间" min-width="150" :show-overflow-tooltip="true" align="center" prop="replyTime"-->
        <!--                         v-if="Utils.tableShowFixed('回单时间',this.toConfigureFieldDialog.tableProp).checkbox"-->
        <!--                         :fixed="Utils.tableShowFixed('回单时间',this.toConfigureFieldDialog.tableProp).fixed"/>-->
        <el-table-column label="任务评分" min-width="150" :show-overflow-tooltip="true" align="center" prop="score"
                         v-if="Utils.tableShowFixed('任务评分',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('任务评分',this.toConfigureFieldDialog.tableProp).fixed"/>
        <!--        <el-table-column label="任务评价" min-width="150" :show-overflow-tooltip="true" align="center" prop="evaluation"-->
        <!--                         v-if="Utils.tableShowFixed('任务评价',this.toConfigureFieldDialog.tableProp).checkbox"-->
        <!--                         :fixed="Utils.tableShowFixed('任务评价',this.toConfigureFieldDialog.tableProp).fixed"/>-->
        <!--        <el-table-column label="评价时间" min-width="150" :show-overflow-tooltip="true" align="center" prop="ratingTime"-->
        <!--                         v-if="Utils.tableShowFixed('评价时间',this.toConfigureFieldDialog.tableProp).checkbox"-->
        <!--                         :fixed="Utils.tableShowFixed('评价时间',this.toConfigureFieldDialog.tableProp).fixed"/>-->
        <!--        <el-table-column label="任务完成度" min-width="150" :show-overflow-tooltip="true" align="center"-->
        <!--                         prop="completeness"-->
        <!--                         v-if="Utils.tableShowFixed('任务完成度',this.toConfigureFieldDialog.tableProp).checkbox"-->
        <!--                         :fixed="Utils.tableShowFixed('任务完成度',this.toConfigureFieldDialog.tableProp).fixed"/>-->
        <!--        <el-table-column label="结单时间" min-width="150" :show-overflow-tooltip="true" align="center" prop="finishTime"-->
        <!--                         v-if="Utils.tableShowFixed('结单时间',this.toConfigureFieldDialog.tableProp).checkbox"-->
        <!--                         :fixed="Utils.tableShowFixed('结单时间',this.toConfigureFieldDialog.tableProp).fixed"/>-->
        <!--        <el-table-column label="结单理由" min-width="150" :show-overflow-tooltip="true" align="center" prop="finishWhy"-->
        <!--                         v-if="Utils.tableShowFixed('结单理由',this.toConfigureFieldDialog.tableProp).checkbox"-->
        <!--                         :fixed="Utils.tableShowFixed('结单理由',this.toConfigureFieldDialog.tableProp).fixed"/>-->
        <el-table-column label="指派人" min-width="150" :show-overflow-tooltip="true" align="center"
                         prop="distributedName"
                         v-if="Utils.tableShowFixed('指派人',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('指派人',this.toConfigureFieldDialog.tableProp).fixed">
        </el-table-column>
        <el-table-column label="创建时间" min-width="150" :show-overflow-tooltip="true" align="center"
                         prop="createdTime"
                         v-if="Utils.tableShowFixed('创建时间',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('创建时间',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="任务状态" min-width="150" :show-overflow-tooltip="true" align="center" prop="taskStatus"
                         v-if="Utils.tableShowFixed('任务状态',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('任务状态',this.toConfigureFieldDialog.tableProp).fixed">
          <template slot-scope="scope">
            <template v-for="item in tableSearchOption.taskStatusOption">
              <template v-if="scope.row.taskStatus==item.value">
                {{ item.label }}
              </template>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="196" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-tickets el-icon--left" @click="handelTakeOders(scope.row)">接单
            </el-button>
            <el-button type="danger" icon="el-icon-document-delete el-icon--left" @click="rejectionSeeClick(scope.row)">拒单
            </el-button>
            <el-button type="warning" icon="el-icon-document-copy el-icon--left" @click="ReceiptClick(scope.row)">回单
            </el-button>
            <el-button type="primary" icon="el-icon-view el-icon--left" @click="tableSeeClick(scope.row,0)">查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="common-pagination">
        <el-pagination
            @size-change="pageSizeChange"
            @current-change="pageCurrentChange"
            :current-page="paginationProp.currentPage"
            :page-sizes="[10, 20, 50, 100,500,1000]"
            :page-size="paginationProp.pageSize"
            layout="total,sizes, prev, pager, next, jumper"
            :total="paginationProp.total"
        />
      </div>
    </template>

    <!--抽屉增加和修改-->
    <el-drawer
        :title="drawerProp.title"
        :visible.sync="drawerProp.isDrawer"
        direction="rtl"
        :append-to-body="true"
        :modal-append-to-body="false"
        custom-class="common-drawer"
        size="1050px"
    >
      <div class="common-drawer-content" v-loading="drawerProp.loading">
        <div class="parent">
          <!--左边-->
          <div class="leftChild">
            <ul class="content">
              <li :class="[drawerProp.active===0?'active':'']" @click="drawerActiveClick(0)">基础设置</li>
            </ul>
          </div>
          <!--右边-->
          <div class="rightChild">
            <ul class="content" ref="scrollViewRight" @wheel.passive="addWheelChange"
                :style="{'height': drawerProp.rightProp.height+'px'}">
              <li class="content-main" ref="drawerLi0">
                <div class="title">
                  <span></span>
                  <label>基础设置</label>
                  <div class="s"></div>
                  <template v-if="drawerProp.status==='see' && drawerProp.seeBut">
                    <div class="n" @click="drawerEdit(0)">
                      <i class="el-icon-edit"></i>
                      编辑
                    </div>
                  </template>
                </div>
                <!--查看-->
                <div class="see" v-if="drawerProp.status!=='add' && drawerProp.status!=='edit'">
                  <ul class="common-drawer-see">
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">任务类型</span>
                      <template v-for="item in tableSearchOption.taskTypeOption">
                        <template v-if="formData.taskType==item.value">
                          {{ item.label }}
                        </template>
                      </template>
                    </li>
                    <li class="common-drawer-see-li li2">
                      <span class="common-drawer-see-li-title">任务描述</span>
                      {{ formData.description }}
                    </li>
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">计划开始时间</span>
                      {{ Utils.timeDate(formData.planStart, 4) }}
                    </li>
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">计划结束时间</span>
                      {{ Utils.timeDate(formData.planEnd, 4) }}
                    </li>
                    <li class="common-drawer-see-li " v-if="formData.taskStatus == '1'">
                      <span class="common-drawer-see-li-title">派单时间</span>
                      {{ Utils.timeDate(formData.distributeTime, 4) }}
                    </li>
                    <li class="common-drawer-see-li " v-if="formData.taskStatus == '5'">
                      <span class="common-drawer-see-li-title">退单时间</span>
                      {{ Utils.timeDate(formData.refuseTime, 4) }}
                    </li>
                    <li class="common-drawer-see-li " v-if="formData.taskStatus =='5'">
                      <span class="common-drawer-see-li-title">退单理由</span>
                      {{ formData.refuseWhy }}
                    </li>
                    <li class="common-drawer-see-li " v-if="formData.taskStatus == '2'">
                      <span class="common-drawer-see-li-title">接单时间</span>
                      {{ Utils.timeDate(formData.acceptTime, 4) }}
                    </li>
                    <li class="common-drawer-see-li " v-if="formData.taskStatus == '4'">
                      <span class="common-drawer-see-li-title">任务回复</span>
                      {{ formData.response }}
                    </li>
                    <li class="common-drawer-see-li " v-if="formData.taskStatus == '4'">
                      <span class="common-drawer-see-li-title">回单时间</span>
                      {{ Utils.timeDate(formData.replyTime, 4) }}
                    </li>
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">任务评分</span>
                      {{ formData.score }}
                    </li>
                    <li class="common-drawer-see-li " v-if="formData.taskStatus == '9'">
                      <span class="common-drawer-see-li-title">任务评价</span>
                      {{ formData.evaluation }}
                    </li>
                    <li class="common-drawer-see-li " v-if="formData.taskStatus == '9'">
                      <span class="common-drawer-see-li-title">评价时间</span>
                      {{ Utils.timeDate(formData.ratingTime, 4) }}
                    </li>
                    <li class="common-drawer-see-li " v-if="formData.taskStatus == '9'">
                      <span class="common-drawer-see-li-title">任务完成度</span>
                      {{ formData.completeness }}
                    </li>
                    <li class="common-drawer-see-li " v-if="formData.taskStatus == '9'">
                      <span class="common-drawer-see-li-title">结单时间</span>
                      {{ formData.finishTime }}
                    </li>
                    <li class="common-drawer-see-li " v-if="formData.taskStatus == '9'">
                      <span class="common-drawer-see-li-title">结单理由</span>
                      {{ formData.finishWhy }}
                    </li>
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">指派人</span>
                      {{ formData.distributedName }}
                      <!--                      <template v-for="item in formDataOption.createdByOption">-->
                      <!--                        <template v-if="formData.createdBy==item.value">-->
                      <!--                          {{ item.label }}-->
                      <!--                        </template>-->
                      <!--                      </template>-->
                    </li>
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">创建时间</span>
                      {{ Utils.timeDate(formData.createdTime, 4) }}
                    </li>
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">任务状态</span>
                      <template v-for="item in tableSearchOption.taskStatusOption">
                        <template v-if="formData.taskStatus==item.value">
                          {{ item.label }}
                        </template>
                      </template>
                    </li>
                  </ul>
                </div>
                <div class="edit" v-if="drawerProp.status==='edit' || drawerProp.status==='add'">
                  <el-form :model="formData" ref="drawerFrom0" class="common-drawer-edit">
                    <el-form-item label="任务类型" prop="taskType" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请选择任务类型', trigger: 'change' }]">
                      <el-select placeholder="请选择任务类型" v-model="formData.taskType" filterable clearable
                                 :disabled="false">
                        <el-option v-for="item in tableSearchOption.taskTypeOption" :key="item.value"
                                   :label="item.label"
                                   :value="item.value"/>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="任务描述" prop="description" class="common-drawer-edit-li li2"
                                  :rules="[{ required: true, message: '请输入任务描述', trigger: 'blur' }]">
                      <el-input placeholder="请输入任务描述" type="textarea" v-model="formData.description"
                                :disabled="false" :autosize="{ minRows: 2, maxRows: 4}" maxlength="300"
                                show-word-limit/>
                    </el-form-item>
                    <el-form-item label="计划开始时间" prop="planStart" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请选择计划开始时间', trigger: 'change' }]">
                      <el-date-picker placeholder="请选择计划开始时间" v-model="formData.planStart" :disabled="false"
                                      type="datetime" default-time="23:59:59" value-format="timestamp"/>
                    </el-form-item>
                    <el-form-item label="计划结束时间" prop="planEnd" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请选择计划结束时间', trigger: 'change' }]">
                      <el-date-picker placeholder="请选择计划结束时间" v-model="formData.planEnd" :disabled="false"
                                      type="datetime" default-time="23:59:59" value-format="timestamp"/>
                    </el-form-item>
                    <el-form-item label="派单时间" prop="distributeTime" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请选择派单时间', trigger: 'change' }]">
                      <el-date-picker placeholder="请选择派单时间" v-model="formData.distributeTime" :disabled="false"
                                      type="datetime" default-time="23:59:59" value-format="timestamp"/>
                    </el-form-item>
                    <el-form-item label="退单时间" prop="refuseTime" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请选择退单时间', trigger: 'change' }]">
                      <el-date-picker placeholder="请选择退单时间" v-model="formData.refuseTime" :disabled="false"
                                      type="datetime" default-time="23:59:59" value-format="timestamp"/>
                    </el-form-item>
                    <el-form-item label="退单理由" prop="refuseWhy" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请输入退单理由', trigger: 'blur' }]">
                      <el-input placeholder="请输入退单理由" v-model="formData.refuseWhy" :disabled="false" clearable/>
                    </el-form-item>
                    <el-form-item label="接单时间" prop="acceptTime" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请选择接单时间', trigger: 'change' }]">
                      <el-date-picker placeholder="请选择接单时间" v-model="formData.acceptTime" :disabled="false"
                                      type="datetime" default-time="23:59:59" value-format="timestamp"/>
                    </el-form-item>
                    <el-form-item label="任务回复" prop="response" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请输入任务回复', trigger: 'blur' }]">
                      <el-input placeholder="请输入任务回复" v-model="formData.response" :disabled="false" clearable/>
                    </el-form-item>
                    <el-form-item label="回单时间" prop="replyTime" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请选择回单时间', trigger: 'change' }]">
                      <el-date-picker placeholder="请选择回单时间" v-model="formData.replyTime" :disabled="false"
                                      type="datetime" default-time="23:59:59" value-format="timestamp"/>
                    </el-form-item>
                    <el-form-item label="任务评分" prop="score" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请输入任务评分', trigger: 'blur' }]">
                      <el-input placeholder="请输入任务评分" v-model="formData.score" :disabled="false" clearable/>
                    </el-form-item>
                    <el-form-item label="任务评价" prop="evaluation" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请输入任务评价', trigger: 'blur' }]">
                      <el-input placeholder="请输入任务评价" v-model="formData.evaluation" :disabled="false" clearable/>
                    </el-form-item>
                    <el-form-item label="评价时间" prop="ratingTime" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请选择评价时间', trigger: 'change' }]">
                      <el-date-picker placeholder="请选择评价时间" v-model="formData.ratingTime" :disabled="false"
                                      type="datetime" default-time="23:59:59" value-format="timestamp"/>
                    </el-form-item>
                    <el-form-item label="任务完成度" prop="completeness" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请输入任务完成度', trigger: 'blur' }]">
                      <el-input placeholder="请输入任务完成度" v-model="formData.completeness" :disabled="false"
                                clearable/>
                    </el-form-item>
                    <el-form-item label="结单时间" prop="finishTime" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请输入结单时间', trigger: 'blur' }]">
                      <el-input placeholder="请输入结单时间" v-model="formData.finishTime" :disabled="false" clearable/>
                    </el-form-item>
                    <el-form-item label="结单理由" prop="finishWhy" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请输入结单理由', trigger: 'blur' }]">
                      <el-input placeholder="请输入结单理由" v-model="formData.finishWhy" :disabled="false" clearable/>
                    </el-form-item>
                    <!--                    <el-form-item label="指派人" prop="createdBy" class="common-drawer-edit-li "-->
                    <!--                                  :rules="[{ required: true, message: '请选择指派人', trigger: 'change' }]">-->
                    <!--                      <el-select placeholder="请选择指派人" v-model="formData.createdBy" filterable clearable-->
                    <!--                                 :disabled="false">-->
                    <!--                        <el-option v-for="item in formDataOption.createdByOption" :key="item.value" :label="item.label"-->
                    <!--                                   :value="item.value"/>-->
                    <!--                      </el-select>-->
                    <!--                    </el-form-item>-->
                    <el-form-item label="创建时间" prop="createdTime" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请选择创建时间', trigger: 'change' }]">
                      <el-date-picker placeholder="请选择创建时间" v-model="formData.createdTime" :disabled="false"
                                      type="datetime" default-time="23:59:59" value-format="timestamp"/>
                    </el-form-item>
                    <el-form-item label="任务状态" prop="taskStatus" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请选择任务状态', trigger: 'change' }]">
                      <el-select placeholder="请选择任务状态" v-model="formData.taskStatus" filterable clearable
                                 :disabled="false">
                        <el-option v-for="item in tableSearchOption.taskStatusOption" :key="item.value"
                                   :label="item.label"
                                   :value="item.value"/>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!--操作按钮-->
        <template>
          <div class="common-drawer-title-add-edit" v-if="drawerProp.status==='add'">
            <el-button icon="el-icon-close el-icon--left" @click="drawerProp.isDrawer=false">取 消</el-button>
            <el-button type="primary" icon="el-icon-check el-icon--left" @click="drawerSubmitForm('add')">保 存
            </el-button>
          </div>
          <div class="common-drawer-title-add-edit" v-if="drawerProp.status==='edit'">
            <el-button icon="el-icon-close el-icon--left" @click="drawerSubmitForm('see')">取 消</el-button>
            <el-button type="primary" icon="el-icon-check el-icon--left" @click="drawerSubmitForm('edit')">保 存
            </el-button>
          </div>

        </template>
      </div>
    </el-drawer>

    <!--dialog 集合-->


    <!--tabs和table dialog 字段选择显示问题-->
    <el-dialog
        :append-to-body="true"
        :close-on-click-modal="false"
        :show-close="true"
        :close-on-press-escape="false"
        :title="toConfigureFieldDialog.title"
        :visible.sync="toConfigureFieldDialog.isDialog"
        custom-class="toConfigure-field-dialog"
        @close="tabsOrTableCancel"
        width="1060px"
    >
      <div class="toConfigure-field-dialog-content" v-loading="toConfigureFieldDialog.loading">
        <div class="left">
          <el-input placeholder="搜索字段" v-model="toConfigureFieldDialog.search" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="tabsOrTableSearch(toConfigureFieldDialog.search)"/>
          </el-input>
          <div class="parent">
            <div class="child">
              <el-scrollbar wrap-class="scrollbar-x" style="height: 100%">
                <template v-for="(item,key) in toConfigureFieldDialog[toConfigureFieldDialog.status]">
                  <dl :key="key" class="content" v-if="item.show">
                    <dt>{{ item.name }}</dt>
                    <dd>
                      <template v-for="(item2, key2) in item.option">
                        <el-checkbox v-model="item2.checkbox" @change="tabsOrTableChecked(item2)" :key="key2"
                                     v-if="item2.show" :disabled="item2.disabled">
                          <el-tooltip class="item" :disabled="item2.label.length<8" effect="dark" :content="item2.label"
                                      placement="top-start" :key="key">
                            <div class="tooltip">{{ item2.label }}</div>
                          </el-tooltip>
                        </el-checkbox>
                      </template>
                    </dd>
                  </dl>
                </template>
              </el-scrollbar>
            </div>
          </div>
        </div>

        <div class="right">
          <div class="title">
            已选择（{{ toConfigureFieldDialog.selectNum }}）
          </div>
          <div class="parent">
            <div class="child">
              <el-scrollbar wrap-class="scrollbar-x" style="height: 100%">
                <!--tabs配置-->
                <ul class="content" v-if="toConfigureFieldDialog.status==='tabsProp'">
                  <draggable v-model="toConfigureFieldDialog.draggableProp">
                    <template v-for="(item,key) in toConfigureFieldDialog.draggableProp">
                      <li :key="key">
                        <i class="el-icon-thumb"/><span>{{ item.label }}</span><i class="el-icon-close"
                                                                                  @click="tabsOrTableClose(item,key)"
                                                                                  v-show="!item.disabled"></i>
                      </li>
                    </template>
                  </draggable>
                </ul>
                <!--table配置-->
                <ul class="content" v-if="toConfigureFieldDialog.status==='tableProp'">
                  <template v-for="(item,key) in toConfigureFieldDialog.draggableProp">
                    <li :key="key">
                      <i class="el-icon-thumb"/><span>{{ item.label }}</span>
                      <el-select v-model="item.fixed" class="frozenSelect">
                        <el-option v-for="item in $store.state.tableFixed" :key="item.value" :label="item.label"
                                   :value="item.value"/>
                      </el-select>
                      <i class="el-icon-close" @click="tabsOrTableClose(item,key)"></i>
                    </li>
                  </template>
                </ul>
              </el-scrollbar>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="toConfigure-field-dialog-footer">
        <el-button type="danger" @click="tabsOrTableDialogReductionInit(toConfigureFieldDialog.status)"
                   icon="el-icon-delete el-icon--left">还原初始化
        </el-button>
        <el-button @click="tabsOrTableCancel" icon="el-icon-close el-icon--left">取 消</el-button>
        <el-button type="primary" @click="tabsOrTableDetermine" icon="el-icon-check el-icon--left">确 定</el-button>
      </div>
    </el-dialog>

    <!--  接单  -->
    <el-dialog title="接单"
               :visible.sync="takeOrdersVisible"
               :append-to-body="true"
               :close-on-click-modal="false"
               :show-close="true"
               :close-on-press-escape="false"
               custom-class="toConfigure-field-dialog"
               @close="takeOrdersVisible = false"
               width="1060px"
    >
      <el-form :model="takeOrdersForm" ref="takeOrdersForm" class="common-drawer-edit">
        <el-form-item label="任务状态" prop="taskStatus" class="common-drawer-edit-li "
                      :rules="[{ required: true, message: '请选择任务状态', trigger: 'change' }]">
          <el-select placeholder="请选择任务状态" v-model="takeOrdersForm.taskStatus" filterable clearable
                     :disabled="true">
            <el-option v-for="item in taskStatueOptions" :key="item.label"
                       :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="toConfigure-field-dialog-footer">
        <el-button @click="takeOrderClose" icon="el-icon-close el-icon--left">取 消</el-button>
        <el-button type="primary" @click="submitTakeOrder" icon="el-icon-check el-icon--left">确 定</el-button>
      </div>
    </el-dialog>

    <!--  拒单  -->
    <el-dialog title="拒单"
               :visible.sync="rejectionVisible"
               :append-to-body="true"
               :close-on-click-modal="false"
               :show-close="true"
               :close-on-press-escape="false"
               custom-class="toConfigure-field-dialog"
               @close="takeOrdersVisible = false"
               width="1060px"
    >
      <el-form :model="rejectionForm" ref="rejectionForm" class="common-drawer-edit">
        <el-form-item label="退单理由" prop="refuseWhy" class="common-drawer-edit-li "
                      :rules="[{ required: true, message: '请输入退单理由', trigger: 'blur' }]">
          <el-input placeholder="请输入退单理由" v-model="rejectionForm.refuseWhy" :disabled="false" clearable/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="toConfigure-field-dialog-footer">
        <el-button @click="rejectionClose" icon="el-icon-close el-icon--left">取 消</el-button>
        <el-button type="primary" @click="submitrejection" icon="el-icon-check el-icon--left">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>
import draggable from 'vuedraggable'

export default {
  name: 'navigation7',
  components: {draggable},
  props: [],
  data() {
    return {
      rejectionVisible:false,
      rejectionForm:{
        id:'',
        taskStatus:'5',
        refuseTime:'',
        refuseWhy:'',
      },
      taskStatueOptions:[],
      takeOrdersVisible:false,
      takeOrdersForm:{
        id:'',
        taskStatus:'2',
        acceptTime:''
      },
      //接口名称
      apiProp: {
        tableInit: 'navigation7List',//表格初始化
        tableAddEdit: 'navigation7AddEdit',//表格增加和编辑接口
        tableDel: 'navigation7Del',//表格删除接口
        tableQuery: 'navigation7Query',//表格查一条接口
        tableBatchDel: 'navigation7BatchDel',//批量删除接口
        tabsOrTableId: 0,//设置搜索条件和表头id
        selectApiBoolean: false,//比初始化接口先运行的接口是否先运行完成
      },
      headersData: {token: window.localStorage.getItem('token')},//导入之类要用

      //title 配置
      titleProp: {},

      //tabs 配置
      tabsProp: {
        active: '',
        statusField: 'status',//切换的字段名
        SearchDropDown: true,//高级搜索下拉默认显示状态
        liHtmlNum: '',//有高级搜索时候差几个li
      },
      //tabs 搜索字段
      tabsSearchData: {},
      //tabs 选项
      tabsSearchOption: {},

      //table 数据
      tableData: [],
      tableProp: {
        loading: false,
        tableHeight: 0,
        tableSelectAll: [],//表格多选的值
      },
      // table 选项
      tableSearchOption: {//table 任务类型 选项
        taskTypeOption: [
          {label: '', value: ''},
        ],
        //指派人 选项
        createdByOption: [],
        //table 任务状态 选项
        taskStatusOption: [
          {label: '', value: ''},
        ],
      },
      //table dialog data
      tableDialogProp: {},

      // 抽屉 值
      formData: {
        id: '',
        taskType: '',//任务类型
        description: '',//任务描述
        planStart: '',//计划开始时间
        planEnd: '',//计划结束时间
        distributeTime: '',//派单时间
        refuseTime: '',//退单时间
        refuseWhy: '',//退单理由
        acceptTime: '',//接单时间
        response: '',//任务回复
        replyTime: '',//回单时间
        score: '',//任务评分
        evaluation: '',//任务评价
        ratingTime: '',//评价时间
        completeness: '',//任务完成度
        finishTime: '',//结单时间
        finishWhy: '',//结单理由
        createdBy: '',//指派人
        createdTime: '',//创建时间
        taskStatus: '',//任务状态
        distributedName: ''
      },
      // 抽屉 选项
      formDataOption: {//任务类型 选项
        taskTypeOption: [
          {label: '', value: ''},
        ],
        //指派人 选项
        createdByOption: [],
        //任务状态 选项
        taskStatusOption: [
          {label: '', value: ''},
        ],
      },
      //抽屉 配置
      drawerProp: {
        isDrawer: false,
        loading: false,
        title: '',
        seeBut: false,//是否是 查看/编辑 只有查看就是false
        active: 0,//左边选择了哪个
        status: 'add',// add 新增  see 查看
        leftProp: ["基础设置",],
        rightProp: {
          height: document.documentElement.clientHeight - 90,//右边高度
        }
      },

      //分页配置
      paginationProp: {
        currentPage: 1,//当前第几页
        pageSize: 10,//每页几条
        total: 0,//总数
      },
      //tabs和table dialog 字段选择显示
      toConfigureFieldDialog: {
        isDialog: false,
        title: '筛选项配置',
        loading: false,
        status: 'tabsProp',
        search: '',//搜索的值
        selectNum: 0,//选择的数量
        frozenFrontNum: 0,//冻结前几条
        frozenAfterNum: 0,//冻结后几条
        draggableProp: [],//拖拽数据
        tabsProp: [
          {
            name: '基础设置',//标题
            show: true,//搜索是否显示
            option: []
          },
        ],
        tableProp: [
          {
            name: '基础设置',//标题
            show: true,//搜索是否显示
            option: [
              {checkbox: true, label: '任务类型', show: true, order: 0},
              {checkbox: true, label: '任务描述', show: true, order: 0},
              {checkbox: true, label: '计划开始时间', show: true, order: 0},
              {checkbox: true, label: '计划结束时间', show: true, order: 0},
              {checkbox: true, label: '派单时间', show: true, order: 0},
              {checkbox: true, label: '退单时间', show: true, order: 0},
              {checkbox: true, label: '退单理由', show: true, order: 0},
              {checkbox: true, label: '接单时间', show: true, order: 0},
              {checkbox: true, label: '任务回复', show: true, order: 0},
              {checkbox: true, label: '回单时间', show: true, order: 0},
              {checkbox: true, label: '任务评分', show: true, order: 0},
              {checkbox: true, label: '任务评价', show: true, order: 0},
              {checkbox: true, label: '评价时间', show: true, order: 0},
              {checkbox: true, label: '任务完成度', show: true, order: 0},
              {checkbox: true, label: '结单时间', show: true, order: 0},
              {checkbox: true, label: '结单理由', show: true, order: 0},
              {checkbox: true, label: '指派人', show: true, order: 0},
              {checkbox: true, label: '创建时间', show: true, order: 0},
              {checkbox: true, label: '任务状态', show: true, order: 0},
            ]
          },
        ]
      }
    };
  },
  created() {
    this.tableSearchOption.taskTypeOption = this.$getDictData('task_type')
    this.tableSearchOption.taskStatusOption = this.$getDictData('task_status')
    this.taskStatueOptions = this.$getDictData('task_status')
  },
  activated() {
    //table 指派人 选项
    this.$mangerAll().then((result) => {
      this.tableSearchOption.createdByOption = result.map(item => ({
        label: item.name,
        value: item.id
      }));
    })
    //抽屉 基础设置 指派人 选项
    this.$mangerAll().then((result) => {
      this.formDataOption.createdByOption = result.map(item => ({
        label: item.name,
        value: item.id
      }));
    })
  },
  mounted() {
    //高级搜索差几个li
    this.tabsOrTableInit();
    this.initData();//数据初始化
    this.calculationHeight();//table计算高度
    //监听浏览器变化
    window.onresize = () => {
      return (() => {
        this.calculationHeight();//table计算高度
      })();
    };
  },
  watch: {
    //主要作用监听赋值给table高度
    'tabsProp.SearchDropDown'() {
      this.calculationHeight();//table计算高度
    },
  },
  computed: {},
  methods: {
    //初始化
    initData() {

      this.tableProp.loading = true;
      //下拉接口
      let variableArray = [];//变量数组
      if (!this.apiProp.selectApiBoolean) {
        // const form1=new Promise((resolve)=>{
        // this.$().then((result) => {
        //   console.log(result);
        // this.empUnitIdOption = result.map(item => ({
        //  label: item.unitName,
        //  value: item.id
        //  }));
        // resolve()
        // })
        // })
        // variableArray.push(form1)
        this.apiProp.selectApiBoolean = true;
      }
      Promise.all(variableArray).then(() => {
        if (this.apiProp.tableInit) {
          let params = {
            page: this.paginationProp.currentPage,
            row: this.paginationProp.pageSize,
            tenantId: window.sessionStorage.getItem('tenantId'),
            executedBy: window.sessionStorage.getItem('id')
          }
          params[`${this.tabsProp.statusField}`] = this.tabsProp.active == 0 ? '' : this.tabsProp.active;
          this[`$${this.apiProp.tableInit}`](params).then((result) => {
            if (result.data) {
              if (result.data.length == 0) {
                if (this.paginationProp.currentPage != 1) {
                  this.paginationProp.currentPage = this.paginationProp.currentPage - 1;
                  this.initData()
                  return false;
                }
              }
              this.tableData = result.data.map(item => ({
                id: item.id,
                taskType: item.taskType,//任务类型
                description: item.description,//任务描述
                planStart: item.planStart,//计划开始时间
                planEnd: item.planEnd,//计划结束时间
                distributeTime: item.distributeTime,//派单时间
                refuseTime: item.refuseTime,//退单时间
                refuseWhy: item.refuseWhy,//退单理由
                acceptTime: item.acceptTime,//接单时间
                response: item.response,//任务回复
                replyTime: item.replyTime,//回单时间
                score: item.score,//任务评分
                evaluation: item.evaluation,//任务评价
                ratingTime: item.ratingTime,//评价时间
                completeness: item.completeness,//任务完成度
                finishTime: item.finishTime,//结单时间
                finishWhy: item.finishWhy,//结单理由
                createdBy: item.createdBy,//指派人
                createdTime: item.createdTime,//创建时间
                taskStatus: item.taskStatus,//任务状态
                distributedName: item.distributedName,
                problemId:item.problemId
              }));
              this.paginationProp.total = result.count;//总数
              this.tableProp.loading = false;
            } else {
              this.tableData = [];
              this.paginationProp.total = result.count;//总数
              this.tableProp.loading = false;
            }
          }, () => {
            this.tableProp.loading = false;
          })
        } else {
          this.tableProp.loading = false;
        }
      })
    },
    //table 点击查看
    tableSeeClick(row, key) {
      this.drawerProp.isDrawer = true;
      this.drawerProp.title = '详细信息';
      this.drawerProp.status = 'see';
      if (key !== undefined) {
        this.drawerActiveClick(key)
      }
      this.formData = JSON.parse(JSON.stringify(row))

      // this.formData = this.$options.data().formData;
      this.drawerProp.loading = true;
      this.drawerProp.loading = false;

      // let params = {
      //   id: row.id
      // }
      // this[`$${this.apiProp.tableQuery}`](params).then((result) => {
      //   this.formData.id = result.data.id;
      //   this.formData.taskType = result.data.taskType;//任务类型
      //   this.formData.description = result.data.description;//任务描述
      //   this.formData.planStart = this.Utils.stampData13(result.data.planStart);//计划开始时间
      //   this.formData.planEnd = this.Utils.stampData13(result.data.planEnd);//计划结束时间
      //   this.formData.distributeTime = this.Utils.stampData13(result.data.distributeTime);//派单时间
      //   this.formData.refuseTime = this.Utils.stampData13(result.data.refuseTime);//退单时间
      //   this.formData.refuseWhy = result.data.refuseWhy;//退单理由
      //   this.formData.acceptTime = this.Utils.stampData13(result.data.acceptTime);//接单时间
      //   this.formData.response = result.data.response;//任务回复
      //   this.formData.replyTime = this.Utils.stampData13(result.data.replyTime);//回单时间
      //   this.formData.score = result.data.score;//任务评分
      //   this.formData.evaluation = result.data.evaluation;//任务评价
      //   this.formData.ratingTime = this.Utils.stampData13(result.data.ratingTime);//评价时间
      //   this.formData.completeness = result.data.completeness;//任务完成度
      //   this.formData.finishTime = result.data.finishTime;//结单时间
      //   this.formData.finishWhy = result.data.finishWhy;//结单理由
      //   this.formData.createdBy = result.data.createdBy;//指派人
      //   this.formData.createdTime = this.Utils.stampData13(result.data.createdTime);//创建时间
      //   this.formData.taskStatus = result.data.taskStatus;//任务状态
      // })
    },
    //抽屉 点击保存 和取消
    drawerSubmitForm(status) {
      if (status === 'see') {
        this.drawerProp.status = 'see';
        this.tableSeeClick({id: this.formData.id}, this.drawerProp.active);
        return false
      }
      //新增不是数组
      let variableArray = [];//变量数组
      variableArray.push('form' + 0);
      variableArray[0] = new Promise((resolve) => {
        this.$refs['drawerFrom0'].validate((valid) => {
          if (valid)
            resolve()
        })
      })
      Promise.all(variableArray).then(() => {
        this.drawerProp.loading = true;
        let data = {
          id: this.formData.id,
          taskType: this.formData.taskType,//任务类型
          description: this.formData.description,//任务描述
          planStart: this.Utils.timeDate(this.formData.planStart, 4),//计划开始时间
          planEnd: this.Utils.timeDate(this.formData.planEnd, 4),//计划结束时间
          distributeTime: this.Utils.timeDate(this.formData.distributeTime, 4),//派单时间
          refuseTime: this.Utils.timeDate(this.formData.refuseTime, 4),//退单时间
          refuseWhy: this.formData.refuseWhy,//退单理由
          acceptTime: this.Utils.timeDate(this.formData.acceptTime, 4),//接单时间
          response: this.formData.response,//任务回复
          replyTime: this.Utils.timeDate(this.formData.replyTime, 4),//回单时间
          score: this.formData.score,//任务评分
          evaluation: this.formData.evaluation,//任务评价
          ratingTime: this.Utils.timeDate(this.formData.ratingTime, 4),//评价时间
          completeness: this.formData.completeness,//任务完成度
          finishTime: this.formData.finishTime,//结单时间
          finishWhy: this.formData.finishWhy,//结单理由
          createdBy: window.sessionStorage.getItem('id'),//指派人
          createdTime: this.Utils.timeDate(this.formData.createdTime, 4),//创建时间
        }
        this[`$${this.apiProp.tableAddEdit}`](data).then(() => {
          this.$message.success('保存成功');
          this.initData();
          if (status === 'add') {
            this.drawerProp.isDrawer = false;
            this.drawerProp.loading = false;
          } else {
            this.drawerProp.loading = false;
            this.drawerProp.status = 'see';
            this.tableSeeClick({id: this.formData.id})
          }
        }, () => {
          this.drawerProp.loading = false;
        })
      })
    },
    //抽屉 点击编辑
    drawerEdit(key, handle) {
      console.log(handle);
      this.drawerProp.title = '修改详细信息';
      this.drawerProp.status = 'edit';
      this.drawerActiveClick(key);
    },
    //title 新增 点击
    titleAddClick() {
      this.formData = this.$options.data().formData;
      this.drawerProp.isDrawer = true;
      this.drawerProp.loading = false;
      this.drawerProp.title = '新增';
      this.drawerProp.status = 'add';
      this.drawerActiveClick(0)
    },
    //tabs 高级搜索 重置按钮
    tabsSearchReset() {
      this.tabsSearchData = this.$options.data().tabsSearchData;
    },
    //tabs 高级搜索 查询按钮点击
    tabsSearchDetermine() {
      this.paginationProp.currentPage = 1;//当前第几页
      this.initData();
    },
    //tabs 切换点击
    tabsSwitchClick() {
      this.paginationProp.currentPage = 1;//当前第几页
      this.initData();
    },
    //table 分页 选择了每页几条
    pageSizeChange(val) {
      this.paginationProp.currentPage = 1;//当前第几页
      this.paginationProp.pageSize = val;//每页几条
      this.initData();
    },
    //table 分页 点击了跳转到第几页
    pageCurrentChange(val) {
      this.paginationProp.currentPage = val;//当前第几页
      this.initData();
    },
    //table 多选
    tableSelectionChange(val) {
      this.tableProp.tableSelectAll = [];
      for (let i = 0; i < val.length; i++) {
        this.tableProp.tableSelectAll.push(val[i].id)
      }
    },
    //table 点击删除
    tableDelClick(row) {
      this.$confirm('此操作将永久删除, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {
          id: row.id
        }
        this[`$${this.apiProp.tableDel}`](data).then(() => {
          this.$message.success('删除成功');
          this.initData();
        })
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    //抽屉左边 点击切换标题
    drawerActiveClick(key) {
      setTimeout(() => {
        let scrollHeight = 0;
        this.drawerLiArray = [];
        for (let i = 0; i < this.drawerProp.leftProp.length; i++) {
          this.drawerLiArray.push(this.$refs[`drawerLi${i}`].scrollHeight);
          if (key > i) {
            scrollHeight += this.$refs[`drawerLi${i}`].scrollHeight
          }
        }
        this.$refs.scrollViewRight.scrollTo(0, scrollHeight);
        this.drawerProp.active = key;
      }, 300)
    },
    //抽屉右边 监听鼠标滚动
    addWheelChange() {
      setTimeout(() => {
        let scrollTop = 0;
        for (let i = 0; i < this.drawerLiArray.length; i++) {
          scrollTop += this.drawerLiArray[i];
          if (scrollTop > this.$refs.scrollViewRight.scrollTop) {
            this.drawerProp.active = i;
            return false;
          }
        }
      }, 300)
    },
    //附件下载
    uploadFileDownload(url, item) {
      //下载不了是跨域的问题
      const URL = url
      window.URL = window.URL || window.webkitURL
      let xhr = new XMLHttpRequest()
      xhr.open('get', URL, true)
      xhr.responseType = 'blob'
      xhr.onload = function () {
        if (this.status == 200) {
          //得到一个blob对象
          let blob = this.response
          let fileUrl = window.URL.createObjectURL(blob)
          let a = document.createElement('a')
          ;(document.body || document.documentElement).appendChild(a)
          a.href = fileUrl
          if ('download' in a) {
            a.download = item.name
          } else {
            a.setAttribute('download', item.name)
          }
          a.target = '_self'
          a.click()
          a.remove()
        }
      }
      xhr.send()
    },
    //图片放大下载 开始
    clickImage() {
      this.$nextTick(() => {
        let wrapper = document.getElementsByClassName(
            'el-image-viewer__actions__inner'
        )
        let downImg = document.createElement('i')
        downImg.setAttribute('class', 'el-icon-download')
        wrapper[0].appendChild(downImg)
        if (wrapper.length > 0) {
          this.wrapperElem = wrapper[0]
          this.cusClickHandler()
        }
      })
    },
    cusClickHandler() {
      this.wrapperElem.addEventListener('click', this.hideCusBtn)
    },
    hideCusBtn(e) {
      let className = e.target.className
      if (className === 'el-icon-download') {
        let imgUrl = document.getElementsByClassName(
            'el-image-viewer__canvas'
        )[0].children[0].src
        this.downloadImage(imgUrl)
      }
    },
    downloadImage(imgUrl) {
      let tmpArr = imgUrl.split('/')
      let fileName = tmpArr[tmpArr.length - 1]
      window.URL = window.URL || window.webkitURL
      let xhr = new XMLHttpRequest()
      xhr.open('get', imgUrl, true)
      xhr.responseType = 'blob'
      xhr.onload = function () {
        if (this.status == 200) {
          //得到一个blob对象
          let blob = this.response
          let fileUrl = window.URL.createObjectURL(blob)
          let a = document.createElement('a')
          ;(document.body || document.documentElement).appendChild(a)
          a.href = fileUrl
          if ('download' in a) {
            a.download = fileName
          } else {
            a.setAttribute('download', fileName)
          }
          a.target = '_self'
          a.click()
          a.remove()
        }
      }
      xhr.send()
    },
    //图片放大下载结束
    //table 批量删除
    tableTitleButBatchDel() {
      this.$confirm('此操作将永久删除, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          ids: this.tableProp.tableSelectAll.length > 0 ? this.tableProp.tableSelectAll.toString() : ''
        }
        this[`$${this.apiProp.tableBatchDel}`](params).then(() => {
          this.$message.success('批量删除成功');
          this.initData();
        })
      }).catch(() => {
        this.$message.info('已取消批量删除');
      });
    },
    //table 计算高度
    calculationHeight() {
      setTimeout(() => {
        this.tableProp.tableHeight = document.documentElement.clientHeight - 220 - this.$refs.title.clientHeight - this.$refs.tabs.clientHeight - this.$refs.tableTopBut.clientHeight;
      }, 300)
    },
    //tabs or table dialog 初始化
    tabsOrTableInit() {
      this.toConfigureFieldDialog.loading = true;
    },
    //tabs or table dialog 点击搜索
    tabsOrTableSearch(search) {
      if (search) {
        for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
          let oneShow = false;//第一层是否显示
          for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
            if (this.Utils.fuzzySearch(search, this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].label)) {
              this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].show = true;
              oneShow = true;
            } else {
              this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].show = false;
            }
          }
          this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].show = oneShow;
        }
      } else {
        for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
          this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].show = true;
          for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
            this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].show = true;
          }
        }
      }
    },
    //tabs or table dialog 拖动点击删除
    tabsOrTableClose(item, key) {
      this.toConfigureFieldDialog.draggableProp.splice(key, 1);
      for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
        for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
          if (this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].label === item.label) {
            this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].checkbox = false;
          }
        }
      }
    },
    //tabs or table dialog 清空以前的设置
    tabsOrTableDialogEmpty() {
      this.$confirm('此操作将永久清空搜索和表头设置, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {
          tableId: this.apiProp.tabsOrTableId,
          data: null
        }
        this.$commonApi(data).then(() => {
          this.$message.success('清空设置成功');
          this.toConfigureFieldDialog = this.$options.data().toConfigureFieldDialog;
        })
      }).catch(() => {
        this.$message.info('已取消清空设置');
      });
    },
    //tabs or table dialog 还原初始化
    tabsOrTableDialogReductionInit(status) {
      this.toConfigureFieldDialog.loading = true;
      let data = {
        tableId: this.apiProp.tabsOrTableId,
      }
      this.$commonApi2(data).then((result) => {
        if (result.data && result.data.data) {
          this.toConfigureFieldDialog = JSON.parse(result.data.data);
        } else {
          this.toConfigureFieldDialog = this.$options.data().toConfigureFieldDialog;
        }
        this.toConfigureFieldDialog.status = status;
        this.toConfigureFieldDialog.draggableProp = [];
        for (let i = 0; i < this.toConfigureFieldDialog[status].length; i++) {
          for (let j = 0; j < this.toConfigureFieldDialog[status][i].option.length; j++) {
            if (this.toConfigureFieldDialog[status][i].option[j].checkbox) {
              this.toConfigureFieldDialog.draggableProp.push(this.toConfigureFieldDialog[status][i].option[j])
            }
          }
        }
        this.toConfigureFieldDialog.selectNum = this.toConfigureFieldDialog.draggableProp.length;
        this.toConfigureFieldDialog.isDialog = true;
        this.toConfigureFieldDialog.loading = false;
      })
    },
    //tabs or table dialog 点击 关闭 取消
    tabsOrTableCancel() {
      this.tabsOrTableInit();
    },
    //tabs or table dialog 点击确定
    tabsOrTableDetermine() {
      this.toConfigureFieldDialog.loading = true;
      this.toConfigureFieldDialog.search = '';
      this.tabsOrTableSearch(this.toConfigureFieldDialog.search);
      for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
        for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
          for (let k = 0; k < this.toConfigureFieldDialog.draggableProp.length; k++) {
            if (this.toConfigureFieldDialog.draggableProp[k].label === this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].label) {
              this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].order = k;
            }
          }
        }
      }
      let data = {
        tableId: this.apiProp.tabsOrTableId,
        data: JSON.stringify(this.toConfigureFieldDialog)
      }
      this.$commonApi(data).then(() => {
        this.$message.success('保存成功');
        this.tabsOrTableInit();
        this.tabsSearchData = this.$options.data().tabsSearchData;
        this.initData();
      })
    },
    //tabs or table dialog 点击选择
    tabsOrTableChecked(item) {
      if (item.checkbox) {
        this.toConfigureFieldDialog.draggableProp.push(item)
      } else {
        for (let i = 0; i < this.toConfigureFieldDialog.draggableProp.length; i++) {
          if (this.toConfigureFieldDialog.draggableProp[i].label === item.label) {
            this.toConfigureFieldDialog.draggableProp.splice(i, 1);
          }
        }
      }
      this.toConfigureFieldDialog.selectNum = this.toConfigureFieldDialog.draggableProp.length;
    },
    //tabs table 设置图标和按钮 dialog拖拽
    tabsOrTableSetClick(status, title) {
      this.toConfigureFieldDialog.loading = true;
      this.toConfigureFieldDialog.isDialog = true;
      let data = {
        tableId: this.apiProp.tabsOrTableId,
      }
      this.$commonApi2(data).then((result) => {
        if (result.data && result.data.data) {
          this.toConfigureFieldDialog = JSON.parse(result.data.data)
        }
        this.toConfigureFieldDialog.title = title;
        this.toConfigureFieldDialog.status = status;
        this.toConfigureFieldDialog.draggableProp = [];
        for (let i = 0; i < this.toConfigureFieldDialog[status].length; i++) {
          for (let j = 0; j < this.toConfigureFieldDialog[status][i].option.length; j++) {
            if (this.toConfigureFieldDialog[status][i].option[j].checkbox) {
              this.toConfigureFieldDialog.draggableProp.push(this.toConfigureFieldDialog[status][i].option[j])
            }
          }
        }
        //排序
        this.toConfigureFieldDialog.draggableProp.sort(function (p1, p2) {
          return p1.order - p2.order
        })
        this.toConfigureFieldDialog.selectNum = this.toConfigureFieldDialog.draggableProp.length;
        this.toConfigureFieldDialog.loading = false;
      })
    },
    //tabs 高级搜索 重置按钮

    handelTakeOders(row){
      this.takeOrdersForm.id = row.id
      this.takeOrdersVisible = true
    },

    takeOrderClose(){
      this.$refs.takeOrdersForm.resetFields()
      this.takeOrdersVisible = false
    },
    submitTakeOrder(){
      this.takeOrdersForm.acceptTime = this.Utils.currentTime(0,2)
      this.$refs.takeOrdersForm.validate((valid) => {
        if (valid) {
            this.$navigation7AddEdit(this.takeOrdersForm).then(() => {
              this.$message.success('接单成功');
              this.takeOrdersVisible = false
              this.initData()
          })
        }
      })

      console.log('123',this.takeOrdersForm)
    },
    rejectionClose(){
      this.$refs.rejectionForm.resetFields()
      this.rejectionVisible = false
    },
    submitrejection(){
      this.rejectionForm.refuseTime = this.Utils.currentTime(0,2)
      this.$refs.rejectionForm.validate((valid) => {
        if (valid) {
          this.$navigation7AddEdit(this.rejectionForm).then(() => {
            this.$message.success('拒单成功');
            this.rejectionVisible = false
            this.initData()
          })
        }
      })
    },
    rejectionSeeClick(row){
      this.rejectionForm.id = row.id
      this.rejectionVisible = true
    },
    ReceiptClick(row){
      let obj = {
        id:row.id,
        taskStatus:'4',
        replyTime:this.Utils.currentTime(0,2)
      }
      this.$confirm('是否确定操作回单?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$navigation7AddEdit(obj).then(() => {
          this.$message.success('回单成功');
          // this.rejectionVisible = false
          this.initData()
        })
      }).catch(() => {
        this.$message.info('已取回单');
      });

    },
  },
};
</script>
<style lang="scss" scoped></style>
